<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>WebHID API</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://github.com/nondebug/webhid" rel="canonical">
<style>
table {
  border-collapse: collapse;
  border-left-style: hidden;
  border-right-style: hidden;
  text-align: left;
}
table caption {
  font-weight: bold;
  padding: 3px;
  text-align: left;
}
table td, table th {
  border: 1px solid black;
  padding: 3px;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">WebHID API</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://github.com/nondebug/webhid">https://github.com/nondebug/webhid</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard" data-editor-id="105511"><a class="p-name fn u-email email" href="mailto:mattreynolds@google.com">Matt Reynolds</a> (<a class="p-org org" href="https://www.google.com">Google LLC</a>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the WebHID API Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This document describes an API for providing access to devices that support the Human Interface Device (HID) protocol.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#motivating-applications"><span class="secno">2</span> <span class="content">Motivating Applications</span></a>
     <ol class="toc">
      <li><a href="#app-niche-devices"><span class="secno">2.1</span> <span class="content">Niche devices</span></a>
      <li><a href="#app-prototype-educational"><span class="secno">2.2</span> <span class="content">Prototyping, hobbyists, and educational devices</span></a>
     </ol>
    <li>
     <a href="#security-and-privacy"><span class="secno">3</span> <span class="content">Security and Privacy Considerations</span></a>
     <ol class="toc">
      <li><a href="#abusing-a-device"><span class="secno">3.1</span> <span class="content">Abusing Access to a Device</span></a>
      <li><a href="#attacking-a-device"><span class="secno">3.2</span> <span class="content">Attacking a Device</span></a>
      <li><a href="#attacking-the-host"><span class="secno">3.3</span> <span class="content">Attacking the Host</span></a>
     </ol>
    <li>
     <a href="#enumeration"><span class="secno">4</span> <span class="content">Device Enumeration</span></a>
     <ol class="toc">
      <li><a href="#events"><span class="secno">4.1</span> <span class="content">Events</span></a>
      <li><a href="#report-descriptor"><span class="secno">4.2</span> <span class="content">HID Collection and Report Information</span></a>
     </ol>
    <li><a href="#device-usage"><span class="secno">5</span> <span class="content">Device Usage</span></a>
    <li>
     <a href="#integrations"><span class="secno">6</span> <span class="content">Integrations</span></a>
     <ol class="toc">
      <li><a href="#feature-policy"><span class="secno">6.1</span> <span class="content">Feature Policy</span></a>
     </ol>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <p><em>This section is non-normative</em>.</p>
   <p>A HID (Human Interface Device) is a type of device that takes input from or provides output to humans. It also refers to the HID protocol, a standard for bi-directional communication between a host and a device that is designed to simplify the installation procedure. The HID protocol was originally developed for USB devices but has since been implemented over many other protocols, including Bluetooth.</p>
   <p>The web platform already supports input from many HID devices. Keyboards, pointing devices, and gamepads are all typically implemented using the HID protocol. However, this support relies on the operating system’s HID drivers that transform the HID input into high-level input APIs. Devices that are not well supported by the host’s HID driver are often inaccessible to web pages. Similarly, the outputs on most devices that are not supported by the host’s HID driver are inaccessible.</p>
   <h2 class="heading settled" data-level="2" id="motivating-applications"><span class="secno">2. </span><span class="content">Motivating Applications</span><a class="self-link" href="#motivating-applications"></a></h2>
   <p><em>This section is non-normative</em>.</p>
   <h3 class="heading settled" data-level="2.1" id="app-niche-devices"><span class="secno">2.1. </span><span class="content">Niche devices</span><a class="self-link" href="#app-niche-devices"></a></h3>
   <p>The most common classes of HID input devices are already well-supported on the web platform through existing high-level input APIs. For instance, mouse input is accessible through the PointerEvent API and keyboard input is accessible through the Keyboard API. Input from these devices is handled using the host’s native HID driver and typically does not require device-specific drivers or configuration to work correctly. WebHID is not intended for devices like these that are already well-supported through high-level input APIs.</p>
   <p>For some classes of HID devices, the web platform supports some features of the device but limits access to other features. For instance, the Gamepad API supports the input capabilities of most game controllers but does not support less common capabilities like LED indicators or audio. These features are often not well-supported by host APIs and adding support within the user agent can lead to significant complexity. WebHID would give applications an alternative when the functionality provided by the high-level API is incomplete.</p>
   <p>Many HID devices are not supported through any web platform API. The HID specification describes a wide array of devices that could be supported through HID, including virtual reality controls, flight simulators, medical equipment, and more. WebHID would allow these devices to be used without requiring additional drivers or modification to the user agent.</p>
   <h3 class="heading settled" data-level="2.2" id="app-prototype-educational"><span class="secno">2.2. </span><span class="content">Prototyping, hobbyists, and educational devices</span><a class="self-link" href="#app-prototype-educational"></a></h3>
   <p>HID is attractive for prototyping and hobbyist applications because it allows devices to use the host’s generic HID driver instead of requiring a driver for each host where the device will be used. The simplified installation procedure also makes it easier for educators to deploy a device to a classroom of students without modifying the system configuration on each host. Providing access to HID devices through the web platform would further reduce installation requirements, particularly for devices that are currently only supported through host-specific applications.</p>
   <h2 class="heading settled" data-level="3" id="security-and-privacy"><span class="secno">3. </span><span class="content">Security and Privacy Considerations</span><a class="self-link" href="#security-and-privacy"></a></h2>
   <p><em>This section is non-normative</em>.</p>
   <h3 class="heading settled" data-level="3.1" id="abusing-a-device"><span class="secno">3.1. </span><span class="content">Abusing Access to a Device</span><a class="self-link" href="#abusing-a-device"></a></h3>
   <p>HID peripherals may expose powerful functionality that should not be made accessible to the page without explicit consent from the user. For instance, a HID peripheral may have sensors that allow it to collect information about its surroundings. A device may store private information that should not be revealed or overwritten. Many devices expose functionality that allow the device firmware to be upgraded. Operating systems typically do not restrict access to HID devices from applications, and this access can occasionally be abused to damage the device or corrupt the data stored on it.</p>
   <p>In some cases, a device may expose functionality that should not be accessible at all from a web page. Specific devices may be blocked by recognizing the device by its vendor and product ID and hiding such devices during enumeration. The HID report descriptor allows a device to describe its own capabilities, and this information can be used to block classes of devices even when the vendor and product ID cannot be known in advance. This can be accomplished by inspecting the usage values assigned to collections within the report descriptor; for instance, access to keyboard-like devices can be denied by denying access to devices that include a top-level collection with the Keyboard usage ID.</p>
   <p>To mitigate abuse, a device will not be made available to the page until the user has granted explicit access. Access must first be requested by the page and will be granted once the user has selected the device from a chooser displaying all available devices. Once a page has been granted access, an indicator will be displayed to indicate the device is in use.</p>
   <h3 class="heading settled" data-level="3.2" id="attacking-a-device"><span class="secno">3.2. </span><span class="content">Attacking a Device</span><a class="self-link" href="#attacking-a-device"></a></h3>
   <p>The HID protocol is extremely versatile, and a wide variety of devices have been designed that take advantage of this versatility. As a result, there are many possibilities for how access to a device could allow a malicious page to damage the device itself. It is relatively common for HID peripherals to allow firmware updates to be sent using custom HID reports. Device manufacturers must take care to design the firmware upgrade mechanism to verify that the firmware binary is authentic, and should also protect against downgrades that could reduce the security of a device. Untrusted upgrades could be used to add new capabilities to a device or cause it to masquerade as an entirely different type of device.</p>
   <p>Some devices may be damaged when inputs are provided outside of the expected range. For instance, the rumble feature on a gamepad could become damaged if a page sends an invalid rumble command.</p>
   <p>In general, these types of attacks are device-specific and cannot be mitigated at the API level.</p>
   <h3 class="heading settled" data-level="3.3" id="attacking-the-host"><span class="secno">3.3. </span><span class="content">Attacking the Host</span><a class="self-link" href="#attacking-the-host"></a></h3>
   <p>If a malicious page gains access to a device, in some cases this access can be used to attack the host. A major concern is whether the device can be used to generate trusted input events. These events serve as a proxy for user intent and can be used to access more powerful web platform features.</p>
   <p>Mice and keyboards are typically implemented as HID peripherals, and are also capable of generating trusted input. A HID keyboard or mouse may contain advanced features like programmable macros, which store a sequence of inputs and allow the sequence to be played back at a later time. Device manufacturers must take care to design such features in a way that would prevent a malicious app from reprogramming the device with an unexpected input sequence, and must also protect against triggering macro playback without the user’s explicit consent.</p>
   <h2 class="heading settled" data-level="4" id="enumeration"><span class="secno">4. </span><span class="content">Device Enumeration</span><a class="self-link" href="#enumeration"></a></h2>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-hiddevicefilter"><code><c- g>HIDDeviceFilter</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HIDDeviceFilter" data-dfn-type="dict-member" data-export data-type="unsigned long " id="dom-hiddevicefilter-vendorid"><code><c- g>vendorId</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short"><c- b>unsigned</c-> <c- b>short</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HIDDeviceFilter" data-dfn-type="dict-member" data-export data-type="unsigned short " id="dom-hiddevicefilter-productid"><code><c- g>productId</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short①"><c- b>unsigned</c-> <c- b>short</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HIDDeviceFilter" data-dfn-type="dict-member" data-export data-type="unsigned short " id="dom-hiddevicefilter-usagepage"><code><c- g>usagePage</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short②"><c- b>unsigned</c-> <c- b>short</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HIDDeviceFilter" data-dfn-type="dict-member" data-export data-type="unsigned short " id="dom-hiddevicefilter-usage"><code><c- g>usage</c-></code></dfn>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-hiddevicerequestoptions"><code><c- g>HIDDeviceRequestOptions</c-></code></dfn> {
    <c- b>required</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-hiddevicefilter" id="ref-for-dictdef-hiddevicefilter"><c- n>HIDDeviceFilter</c-></a>> <dfn class="idl-code" data-dfn-for="HIDDeviceRequestOptions" data-dfn-type="dict-member" data-export data-type="sequence<HIDDeviceFilter> " id="dom-hiddevicerequestoptions-filters"><code><c- g>filters</c-></code><a class="self-link" href="#dom-hiddevicerequestoptions-filters"></a></dfn>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="hid"><code><c- g>HID</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget"><c- n>EventTarget</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="HID" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-hid-onconnect"><code><c- g>onconnect</c-></code><a class="self-link" href="#dom-hid-onconnect"></a></dfn>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="HID" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-hid-ondisconnect"><code><c- g>ondisconnect</c-></code><a class="self-link" href="#dom-hid-ondisconnect"></a></dfn>;
    <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice"><c- n>HIDDevice</c-></a>>> <dfn class="dfn-paneled idl-code" data-dfn-for="HID" data-dfn-type="method" data-export data-lt="getDevices()" id="dom-hid-getdevices"><code><c- g>getDevices</c-></code></dfn>();
    <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice①"><c- n>HIDDevice</c-></a>>> <dfn class="dfn-paneled idl-code" data-dfn-for="HID" data-dfn-type="method" data-export data-lt="requestDevice(options)" id="dom-hid-requestdevice"><code><c- g>requestDevice</c-></code></dfn>(
        <a class="n" data-link-type="idl-name" href="#dictdef-hiddevicerequestoptions" id="ref-for-dictdef-hiddevicerequestoptions"><c- n>HIDDeviceRequestOptions</c-></a> <dfn class="idl-code" data-dfn-for="HID/requestDevice(options)" data-dfn-type="argument" data-export id="dom-hid-requestdevice-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-hid-requestdevice-options-options"></a></dfn>);
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext①"><c- g>SecureContext</c-></a>] <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/system-state.html#navigator" id="ref-for-navigator"><c- g>Navigator</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#hid" id="ref-for-hid"><c- n>HID</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Navigator" data-dfn-type="attribute" data-export data-readonly data-type="HID" id="dom-navigator-hid"><code><c- g>hid</c-></code></dfn>;
};

</pre>
   <div class="example" id="example-50f56eab">
    <a class="self-link" href="#example-50f56eab"></a> Retrieve devices and log the device names to the console. 
<pre class="highlight">document<c- p>.</c->addEventListener<c- p>(</c-><c- t>'DOMContentLoaded'</c-><c- p>,</c-> async <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  <c- a>let</c-> devices <c- o>=</c-> await navigator<c- p>.</c->hid<c- p>.</c->getDevices<c- p>();</c->
  devices<c- p>.</c->forEach<c- p>(</c->device <c- p>=></c-> <c- p>{</c->
    console<c- p>.</c->log<c- p>(</c-><c- t>'HID: ${device.productName}'</c-><c- p>);</c->
  <c- p>});</c->
<c- p>});</c->
</pre>
    <p>Register event listeners for connection and disconnection of HID devices.</p>
<pre class="highlight">navigator<c- p>.</c->hid<c- p>.</c->addEventListener<c- p>(</c-><c- t>'connect'</c-><c- p>,</c-> async <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  console<c- p>.</c->log<c- p>(</c-><c- t>'HID connected: ${device.productName}'</c-><c- p>);</c->
<c- p>});</c->

navigator<c- p>.</c->hid<c- p>.</c->addEventListener<c- p>(</c-><c- t>'disconnect'</c-><c- p>,</c-> async <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  console<c- p>.</c->log<c- p>(</c-><c- t>'HID disconnected: ${device.productName}'</c-><c- p>);</c->
<c- p>});</c->
</pre>
    <p>Devices are not accessible through <code class="idl"><a data-link-type="idl" href="#dom-hid-getdevices" id="ref-for-dom-hid-getdevices">getDevices()</a></code> and will not generate connection events until permission has been granted to access the device. The page may request permission using <code class="idl"><a data-link-type="idl" href="#dom-hid-requestdevice" id="ref-for-dom-hid-requestdevice">requestDevice()</a></code>. In this example, the page requests access to a device with vendor ID <code>0xABCD</code>, product ID <code>0x1234</code>. The device must also have a collection with usage page Consumer (<code>0x0C</code>) and usage ID Consumer Control (<code>0x01</code>).</p>
<pre class="highlight"><c- a>let</c-> requestButton <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'request-hid-device'</c-><c- p>);</c->
requestButton<c- p>.</c->addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> async <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  <c- a>let</c-> device<c- p>;</c->
  <c- k>try</c-> <c- p>{</c->
    device <c- o>=</c-> await navigator<c- p>.</c->hid<c- p>.</c->requestDevice<c- p>({</c-> filters<c- o>:</c-> <c- p>[{</c->
        vendorId<c- o>:</c-> <c- mh>0xABCD</c-><c- p>,</c->
        productId<c- o>:</c-> <c- mh>0x1234</c-><c- p>,</c->
        usagePage<c- o>:</c-> <c- mh>0x0C</c-><c- p>,</c->
        usage<c- o>:</c-> <c- mh>0x01</c->
    <c- p>}]});</c->
  <c- p>}</c-> <c- k>catch</c-> <c- p>(</c->error<c- p>)</c-> <c- p>{</c->
    console<c- p>.</c->log<c- p>(</c-><c- t>'No device was selected.'</c-><c- p>);</c->
  <c- p>}</c->

  <c- k>if</c-> <c- p>(</c->device <c- o>!==</c-> <c- kc>undefined</c-><c- p>)</c-> <c- p>{</c->
    console<c- p>.</c->log<c- p>(</c-><c- t>'HID: ${device.productName}'</c-><c- p>);</c->
  <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <p>A HID device <var>device</var> <dfn data-dfn-type="dfn" data-lt="match a device filter" data-noexport id="match-a-device-filter">matches a device filter<a class="self-link" href="#match-a-device-filter"></a></dfn> <var>filter</var> if the following steps return <code>match</code>:</p>
   <ol>
    <li data-md>
     <p>If <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-vendorid" id="ref-for-dom-hiddevicefilter-vendorid">vendorId</a></code></code> is present and <code><var>device</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevice-vendorid" id="ref-for-dom-hiddevice-vendorid">vendorId</a></code></code> does not equal <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-vendorid" id="ref-for-dom-hiddevicefilter-vendorid①">vendorId</a></code></code>, return <code>mismatch</code>.</p>
    <li data-md>
     <p>If <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-productid" id="ref-for-dom-hiddevicefilter-productid">productId</a></code></code> is present and <code><var>device</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevice-productid" id="ref-for-dom-hiddevice-productid">productId</a></code></code> does not equal <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-productid" id="ref-for-dom-hiddevicefilter-productid①">productId</a></code></code>, return <code>mismatch</code>.</p>
    <li data-md>
     <p>If <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-usagepage" id="ref-for-dom-hiddevicefilter-usagepage">usagePage</a></code></code> is present, iterate over the <code class="idl"><a data-link-type="idl" href="#hidcollectioninfo" id="ref-for-hidcollectioninfo">HIDCollectionInfo</a></code> collections in <var>device</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevice-collections" id="ref-for-dom-hiddevice-collections">collections</a></code>. If no collection <a data-link-type="dfn" href="#matches-the-device-filter" id="ref-for-matches-the-device-filter">matches the device filter</a>, return <code>mismatch</code>.</p>
    <li data-md>
     <p>Return <code>match</code>.</p>
   </ol>
   <p>A <code class="idl"><a data-link-type="idl" href="#hidcollectioninfo" id="ref-for-hidcollectioninfo①">HIDCollectionInfo</a></code> <var>collection</var> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="matches the device filter" data-noexport id="matches-the-device-filter">matches a device filter</dfn> <var>filter</var> if the following steps return <code>match</code>:</p>
   <ol>
    <li data-md>
     <p>If <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-usagepage" id="ref-for-dom-hiddevicefilter-usagepage①">usagePage</a></code></code> is present and <code><var>device</var>.<code class="idl"><a data-link-type="idl" href="#dom-hidcollectioninfo-usagepage" id="ref-for-dom-hidcollectioninfo-usagepage">usagePage</a></code></code> does not equal <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-usagepage" id="ref-for-dom-hiddevicefilter-usagepage②">usagePage</a></code></code>, return <code>mismatch</code>.</p>
    <li data-md>
     <p>If <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-usage" id="ref-for-dom-hiddevicefilter-usage">usage</a></code></code> is present and <code><var>device</var>.<code class="idl"><a data-link-type="idl" href="#dom-hidcollectioninfo-usage" id="ref-for-dom-hidcollectioninfo-usage">usage</a></code></code> does not equal <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-usage" id="ref-for-dom-hiddevicefilter-usage①">usage</a></code></code>, return <code>mismatch</code>.</p>
    <li data-md>
     <p>Return <code>match</code>.</p>
   </ol>
   <p>A <code class="idl"><a data-link-type="idl" href="#dictdef-hiddevicefilter" id="ref-for-dictdef-hiddevicefilter①">HIDDeviceFilter</a></code> <var>filter</var> <dfn data-dfn-type="dfn" data-lt="is not a valid filter" data-noexport id="is-not-a-valid-filter">is valid<a class="self-link" href="#is-not-a-valid-filter"></a></dfn> if the following steps return <code>valid</code>:</p>
   <ol>
    <li data-md>
     <p>If <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-productid" id="ref-for-dom-hiddevicefilter-productid②">productId</a></code></code> is present and <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-vendorid" id="ref-for-dom-hiddevicefilter-vendorid②">vendorId</a></code></code> is not present, return <code>invalid</code>.</p>
    <li data-md>
     <p>If <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-usage" id="ref-for-dom-hiddevicefilter-usage②">usage</a></code></code> is present and <code><var>filter</var>.<code class="idl"><a data-link-type="idl" href="#dom-hiddevicefilter-usagepage" id="ref-for-dom-hiddevicefilter-usagepage③">usagePage</a></code></code> is not present, return <code>invalid</code>.</p>
    <li data-md>
     <p>Return <code>valid</code>.</p>
   </ol>
   <p>The UA MUST be able to <dfn data-dfn-type="dfn" data-noexport id="enumerate-all-devices-attached-to-the-system">enumerate all devices attached to the system<a class="self-link" href="#enumerate-all-devices-attached-to-the-system"></a></dfn>. It is not required to perform this work each time an algorithm requests an enumeration. The UA MAY cache the result of the first enumeration it performs and then begin monitoring for device connection and disconnection events, adding connected devices to its cached enumeration and removing disconnected devices. This mode of operation is preferred as it reduces the number of operating system calls.</p>
   <h3 class="heading settled" data-level="4.1" id="events"><span class="secno">4.1. </span><span class="content">Events</span><a class="self-link" href="#events"></a></h3>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-hidconnectioneventinit"><code><c- g>HIDConnectionEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit"><c- n>EventInit</c-></a> {
    <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice②"><c- n>HIDDevice</c-></a> <dfn class="idl-code" data-dfn-for="HIDConnectionEventInit" data-dfn-type="dict-member" data-export data-type="HIDDevice " id="dom-hidconnectioneventinit-device"><code><c- g>device</c-></code><a class="self-link" href="#dom-hidconnectioneventinit-device"></a></dfn>;
};

[
    <dfn class="idl-code" data-dfn-for="HIDConnectionEvent" data-dfn-type="constructor" data-export data-lt="HIDConnectionEvent(type, eventInitDict)" id="dom-hidconnectionevent-hidconnectionevent"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-hidconnectionevent-hidconnectionevent"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="HIDConnectionEvent/HIDConnectionEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-hidconnectionevent-hidconnectionevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-hidconnectionevent-hidconnectionevent-type-eventinitdict-type"></a></dfn>, <a class="n" data-link-type="idl-name" href="#dictdef-hidconnectioneventinit" id="ref-for-dictdef-hidconnectioneventinit"><c- n>HIDConnectionEventInit</c-></a> <dfn class="idl-code" data-dfn-for="HIDConnectionEvent/HIDConnectionEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-hidconnectionevent-hidconnectionevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-hidconnectionevent-hidconnectionevent-type-eventinitdict-eventinitdict"></a></dfn>),
    <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext②"><c- g>SecureContext</c-></a>
] <c- b>interface</c-> <dfn class="idl-code" data-dfn-type="interface" data-export id="hidconnectionevent"><code><c- g>HIDConnectionEvent</c-></code><a class="self-link" href="#hidconnectionevent"></a></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event"><c- n>Event</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice③"><c- n>HIDDevice</c-></a> <dfn class="idl-code" data-dfn-for="HIDConnectionEvent" data-dfn-type="attribute" data-export data-readonly data-type="HIDDevice" id="dom-hidconnectionevent-device"><code><c- g>device</c-></code><a class="self-link" href="#dom-hidconnectionevent-device"></a></dfn>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-hidinputreporteventinit"><code><c- g>HIDInputReportEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit①"><c- n>EventInit</c-></a> {
    <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice④"><c- n>HIDDevice</c-></a> <dfn class="idl-code" data-dfn-for="HIDInputReportEventInit" data-dfn-type="dict-member" data-export data-type="HIDDevice " id="dom-hidinputreporteventinit-device"><code><c- g>device</c-></code><a class="self-link" href="#dom-hidinputreporteventinit-device"></a></dfn>;
    <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet"><c- b>octet</c-></a> <dfn class="idl-code" data-dfn-for="HIDInputReportEventInit" data-dfn-type="dict-member" data-export data-type="octet " id="dom-hidinputreporteventinit-reportid"><code><c- g>reportId</c-></code><a class="self-link" href="#dom-hidinputreporteventinit-reportid"></a></dfn>;
    <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DataView" id="ref-for-idl-DataView"><c- b>DataView</c-></a> <dfn class="idl-code" data-dfn-for="HIDInputReportEventInit" data-dfn-type="dict-member" data-export data-type="DataView " id="dom-hidinputreporteventinit-data"><code><c- g>data</c-></code><a class="self-link" href="#dom-hidinputreporteventinit-data"></a></dfn>;
};

[
    <dfn class="idl-code" data-dfn-for="HIDInputReportEvent" data-dfn-type="constructor" data-export data-lt="HIDInputReportEvent(type, eventInitDict)" id="dom-hidinputreportevent-hidinputreportevent"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-hidinputreportevent-hidinputreportevent"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="HIDInputReportEvent/HIDInputReportEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-hidinputreportevent-hidinputreportevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-hidinputreportevent-hidinputreportevent-type-eventinitdict-type"></a></dfn>, <a class="n" data-link-type="idl-name" href="#dictdef-hidinputreporteventinit" id="ref-for-dictdef-hidinputreporteventinit"><c- n>HIDInputReportEventInit</c-></a> <dfn class="idl-code" data-dfn-for="HIDInputReportEvent/HIDInputReportEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-hidinputreportevent-hidinputreportevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-hidinputreportevent-hidinputreportevent-type-eventinitdict-eventinitdict"></a></dfn>),
    <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext③"><c- g>SecureContext</c-></a>
] <c- b>interface</c-> <dfn class="idl-code" data-dfn-type="interface" data-export id="hidinputreportevent"><code><c- g>HIDInputReportEvent</c-></code><a class="self-link" href="#hidinputreportevent"></a></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①"><c- n>Event</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject②"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice⑤"><c- n>HIDDevice</c-></a> <dfn class="idl-code" data-dfn-for="HIDInputReportEvent" data-dfn-type="attribute" data-export data-readonly data-type="HIDDevice" id="dom-hidinputreportevent-device"><code><c- g>device</c-></code><a class="self-link" href="#dom-hidinputreportevent-device"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet①"><c- b>octet</c-></a> <dfn class="idl-code" data-dfn-for="HIDInputReportEvent" data-dfn-type="attribute" data-export data-readonly data-type="octet" id="dom-hidinputreportevent-reportid"><code><c- g>reportId</c-></code><a class="self-link" href="#dom-hidinputreportevent-reportid"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DataView" id="ref-for-idl-DataView①"><c- b>DataView</c-></a> <dfn class="idl-code" data-dfn-for="HIDInputReportEvent" data-dfn-type="attribute" data-export data-readonly data-type="DataView" id="dom-hidinputreportevent-data"><code><c- g>data</c-></code><a class="self-link" href="#dom-hidinputreportevent-data"></a></dfn>;
};

</pre>
   <h3 class="heading settled" data-level="4.2" id="report-descriptor"><span class="secno">4.2. </span><span class="content">HID Collection and Report Information</span><a class="self-link" href="#report-descriptor"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext④"><c- g>SecureContext</c-></a>] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="hidreportitem"><code><c- g>HIDReportItem</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="boolean" id="dom-hidreportitem-isabsolute"><code><c- g>isAbsolute</c-></code><a class="self-link" href="#dom-hidreportitem-isabsolute"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="boolean" id="dom-hidreportitem-isarray"><code><c- g>isArray</c-></code><a class="self-link" href="#dom-hidreportitem-isarray"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="boolean" id="dom-hidreportitem-isrange"><code><c- g>isRange</c-></code><a class="self-link" href="#dom-hidreportitem-isrange"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③"><c- b>boolean</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="boolean" id="dom-hidreportitem-hasnull"><code><c- g>hasNull</c-></code><a class="self-link" href="#dom-hidreportitem-hasnull"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a>> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<unsigned long>" id="dom-hidreportitem-usages"><code><c- g>usages</c-></code><a class="self-link" href="#dom-hidreportitem-usages"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long②"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-hidreportitem-usageminimum"><code><c- g>usageMinimum</c-></code><a class="self-link" href="#dom-hidreportitem-usageminimum"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long③"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-hidreportitem-usagemaximum"><code><c- g>usageMaximum</c-></code><a class="self-link" href="#dom-hidreportitem-usagemaximum"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long④"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-hidreportitem-designatorminimum"><code><c- g>designatorMinimum</c-></code><a class="self-link" href="#dom-hidreportitem-designatorminimum"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑤"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-hidreportitem-designatormaximum"><code><c- g>designatorMaximum</c-></code><a class="self-link" href="#dom-hidreportitem-designatormaximum"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑥"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-hidreportitem-stringminimum"><code><c- g>stringMinimum</c-></code><a class="self-link" href="#dom-hidreportitem-stringminimum"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑦"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-hidreportitem-stringmaximum"><code><c- g>stringMaximum</c-></code><a class="self-link" href="#dom-hidreportitem-stringmaximum"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short③"><c- b>unsigned</c-> <c- b>short</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="unsigned short" id="dom-hidreportitem-reportsize"><code><c- g>reportSize</c-></code><a class="self-link" href="#dom-hidreportitem-reportsize"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short④"><c- b>unsigned</c-> <c- b>short</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="unsigned short" id="dom-hidreportitem-reportcount"><code><c- g>reportCount</c-></code><a class="self-link" href="#dom-hidreportitem-reportcount"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑧"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-hidreportitem-unitexponent"><code><c- g>unitExponent</c-></code><a class="self-link" href="#dom-hidreportitem-unitexponent"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑨"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-hidreportitem-unit"><code><c- g>unit</c-></code><a class="self-link" href="#dom-hidreportitem-unit"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long"><c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="long" id="dom-hidreportitem-logicalminimum"><code><c- g>logicalMinimum</c-></code><a class="self-link" href="#dom-hidreportitem-logicalminimum"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long①"><c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="long" id="dom-hidreportitem-logicalmaximum"><code><c- g>logicalMaximum</c-></code><a class="self-link" href="#dom-hidreportitem-logicalmaximum"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long②"><c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="long" id="dom-hidreportitem-physicalminimum"><code><c- g>physicalMinimum</c-></code><a class="self-link" href="#dom-hidreportitem-physicalminimum"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long③"><c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportItem" data-dfn-type="attribute" data-export data-readonly data-type="long" id="dom-hidreportitem-physicalmaximum"><code><c- g>physicalMaximum</c-></code><a class="self-link" href="#dom-hidreportitem-physicalmaximum"></a></dfn>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑤"><c- g>SecureContext</c-></a>] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="hidreportinfo"><code><c- g>HIDReportInfo</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet②"><c- b>octet</c-></a> <dfn class="idl-code" data-dfn-for="HIDReportInfo" data-dfn-type="attribute" data-export data-readonly data-type="octet" id="dom-hidreportinfo-reportid"><code><c- g>reportId</c-></code><a class="self-link" href="#dom-hidreportinfo-reportid"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidreportitem" id="ref-for-hidreportitem"><c- n>HIDReportItem</c-></a>> <dfn class="idl-code" data-dfn-for="HIDReportInfo" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<HIDReportItem>" id="dom-hidreportinfo-items"><code><c- g>items</c-></code><a class="self-link" href="#dom-hidreportinfo-items"></a></dfn>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-hidfieldoptions"><code><c- g>HIDFieldOptions</c-></code></dfn> {
    <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet③"><c- b>octet</c-></a> <dfn class="idl-code" data-dfn-for="HIDFieldOptions" data-dfn-type="dict-member" data-export data-type="octet " id="dom-hidfieldoptions-reportid"><code><c- g>reportId</c-></code><a class="self-link" href="#dom-hidfieldoptions-reportid"></a></dfn>;
    <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①⓪"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="HIDFieldOptions" data-dfn-type="dict-member" data-export data-type="unsigned long " id="dom-hidfieldoptions-fieldindex"><code><c- g>fieldIndex</c-></code><a class="self-link" href="#dom-hidfieldoptions-fieldindex"></a></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean④"><c- b>boolean</c-></a> <dfn class="idl-code" data-dfn-for="HIDFieldOptions" data-dfn-type="dict-member" data-export data-type="boolean " id="dom-hidfieldoptions-isfeaturereport"><code><c- g>isFeatureReport</c-></code><a class="self-link" href="#dom-hidfieldoptions-isfeaturereport"></a></dfn>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑥"><c- g>SecureContext</c-></a>] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="hidcollectioninfo"><code><c- g>HIDCollectionInfo</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short⑤"><c- b>unsigned</c-> <c- b>short</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HIDCollectionInfo" data-dfn-type="attribute" data-export data-readonly data-type="unsigned short" id="dom-hidcollectioninfo-usagepage"><code><c- g>usagePage</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short⑥"><c- b>unsigned</c-> <c- b>short</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HIDCollectionInfo" data-dfn-type="attribute" data-export data-readonly data-type="unsigned short" id="dom-hidcollectioninfo-usage"><code><c- g>usage</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidcollectioninfo" id="ref-for-hidcollectioninfo②"><c- n>HIDCollectionInfo</c-></a>> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<HIDCollectionInfo>" id="dom-hidcollectioninfo-children"><code><c- g>children</c-></code><a class="self-link" href="#dom-hidcollectioninfo-children"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidreportinfo" id="ref-for-hidreportinfo"><c- n>HIDReportInfo</c-></a>> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<HIDReportInfo>" id="dom-hidcollectioninfo-inputreports"><code><c- g>inputReports</c-></code><a class="self-link" href="#dom-hidcollectioninfo-inputreports"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidreportinfo" id="ref-for-hidreportinfo①"><c- n>HIDReportInfo</c-></a>> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<HIDReportInfo>" id="dom-hidcollectioninfo-outputreports"><code><c- g>outputReports</c-></code><a class="self-link" href="#dom-hidcollectioninfo-outputreports"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidreportinfo" id="ref-for-hidreportinfo②"><c- n>HIDReportInfo</c-></a>> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<HIDReportInfo>" id="dom-hidcollectioninfo-featurereports"><code><c- g>featureReports</c-></code><a class="self-link" href="#dom-hidcollectioninfo-featurereports"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet④"><c- b>octet</c-></a>> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<octet>" id="dom-hidcollectioninfo-reportids"><code><c- g>reportIds</c-></code><a class="self-link" href="#dom-hidcollectioninfo-reportids"></a></dfn>;

    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo" data-dfn-type="method" data-export data-lt="getField(reportData, options)" id="dom-hidcollectioninfo-getfield"><code><c- g>getField</c-></code><a class="self-link" href="#dom-hidcollectioninfo-getfield"></a></dfn>(<a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#BufferSource" id="ref-for-BufferSource"><c- n>BufferSource</c-></a> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo/getField(reportData, options)" data-dfn-type="argument" data-export id="dom-hidcollectioninfo-getfield-reportdata-options-reportdata"><code><c- g>reportData</c-></code><a class="self-link" href="#dom-hidcollectioninfo-getfield-reportdata-options-reportdata"></a></dfn>, <a class="n" data-link-type="idl-name" href="#dictdef-hidfieldoptions" id="ref-for-dictdef-hidfieldoptions"><c- n>HIDFieldOptions</c-></a> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo/getField(reportData, options)" data-dfn-type="argument" data-export id="dom-hidcollectioninfo-getfield-reportdata-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-hidcollectioninfo-getfield-reportdata-options-options"></a></dfn>);
    <c- b>void</c-> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo" data-dfn-type="method" data-export data-lt="setField(reportData, options, value)" id="dom-hidcollectioninfo-setfield"><code><c- g>setField</c-></code><a class="self-link" href="#dom-hidcollectioninfo-setfield"></a></dfn>(<a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#BufferSource" id="ref-for-BufferSource①"><c- n>BufferSource</c-></a> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo/setField(reportData, options, value)" data-dfn-type="argument" data-export id="dom-hidcollectioninfo-setfield-reportdata-options-value-reportdata"><code><c- g>reportData</c-></code><a class="self-link" href="#dom-hidcollectioninfo-setfield-reportdata-options-value-reportdata"></a></dfn>, <a class="n" data-link-type="idl-name" href="#dictdef-hidfieldoptions" id="ref-for-dictdef-hidfieldoptions①"><c- n>HIDFieldOptions</c-></a> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo/setField(reportData, options, value)" data-dfn-type="argument" data-export id="dom-hidcollectioninfo-setfield-reportdata-options-value-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-hidcollectioninfo-setfield-reportdata-options-value-options"></a></dfn>,
                  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="HIDCollectionInfo/setField(reportData, options, value)" data-dfn-type="argument" data-export id="dom-hidcollectioninfo-setfield-reportdata-options-value-value"><code><c- g>value</c-></code><a class="self-link" href="#dom-hidcollectioninfo-setfield-reportdata-options-value-value"></a></dfn>);
};

</pre>
   <h2 class="heading settled" data-level="5" id="device-usage"><span class="secno">5. </span><span class="content">Device Usage</span><a class="self-link" href="#device-usage"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑦"><c- g>SecureContext</c-></a>] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="hiddevice"><code><c- g>HIDDevice</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget①"><c- n>EventTarget</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="HIDDevice" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-hiddevice-oninputreport"><code><c- g>oninputreport</c-></code><a class="self-link" href="#dom-hiddevice-oninputreport"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑤"><c- b>boolean</c-></a> <dfn class="idl-code" data-dfn-for="HIDDevice" data-dfn-type="attribute" data-export data-readonly data-type="boolean" id="dom-hiddevice-opened"><code><c- g>opened</c-></code><a class="self-link" href="#dom-hiddevice-opened"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short⑦"><c- b>unsigned</c-> <c- b>short</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HIDDevice" data-dfn-type="attribute" data-export data-readonly data-type="unsigned short" id="dom-hiddevice-vendorid"><code><c- g>vendorId</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short⑧"><c- b>unsigned</c-> <c- b>short</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HIDDevice" data-dfn-type="attribute" data-export data-readonly data-type="unsigned short" id="dom-hiddevice-productid"><code><c- g>productId</c-></code></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="HIDDevice" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-hiddevice-productname"><code><c- g>productName</c-></code><a class="self-link" href="#dom-hiddevice-productname"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidcollectioninfo" id="ref-for-hidcollectioninfo③"><c- n>HIDCollectionInfo</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="HIDDevice" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<HIDCollectionInfo>" id="dom-hiddevice-collections"><code><c- g>collections</c-></code></dfn>;
    <c- b>Promise</c->&lt;<c- b>void</c->> <dfn class="idl-code" data-dfn-for="HIDDevice" data-dfn-type="method" data-export data-lt="open()" id="dom-hiddevice-open"><code><c- g>open</c-></code><a class="self-link" href="#dom-hiddevice-open"></a></dfn>();
    <c- b>Promise</c->&lt;<c- b>void</c->> <dfn class="idl-code" data-dfn-for="HIDDevice" data-dfn-type="method" data-export data-lt="close()" id="dom-hiddevice-close"><code><c- g>close</c-></code><a class="self-link" href="#dom-hiddevice-close"></a></dfn>();
    <c- b>Promise</c->&lt;<c- b>void</c->> <dfn class="idl-code" data-dfn-for="HIDDevice" data-dfn-type="method" data-export data-lt="sendReport(reportId, data)" id="dom-hiddevice-sendreport"><code><c- g>sendReport</c-></code><a class="self-link" href="#dom-hiddevice-sendreport"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet⑤"><c- b>octet</c-></a> <dfn class="idl-code" data-dfn-for="HIDDevice/sendReport(reportId, data)" data-dfn-type="argument" data-export id="dom-hiddevice-sendreport-reportid-data-reportid"><code><c- g>reportId</c-></code><a class="self-link" href="#dom-hiddevice-sendreport-reportid-data-reportid"></a></dfn>, <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#BufferSource" id="ref-for-BufferSource②"><c- n>BufferSource</c-></a> <dfn class="idl-code" data-dfn-for="HIDDevice/sendReport(reportId, data)" data-dfn-type="argument" data-export id="dom-hiddevice-sendreport-reportid-data-data"><code><c- g>data</c-></code><a class="self-link" href="#dom-hiddevice-sendreport-reportid-data-data"></a></dfn>);
    <c- b>Promise</c->&lt;<c- b>void</c->> <dfn class="idl-code" data-dfn-for="HIDDevice" data-dfn-type="method" data-export data-lt="sendFeatureReport(reportId, data)" id="dom-hiddevice-sendfeaturereport"><code><c- g>sendFeatureReport</c-></code><a class="self-link" href="#dom-hiddevice-sendfeaturereport"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet⑥"><c- b>octet</c-></a> <dfn class="idl-code" data-dfn-for="HIDDevice/sendFeatureReport(reportId, data)" data-dfn-type="argument" data-export id="dom-hiddevice-sendfeaturereport-reportid-data-reportid"><code><c- g>reportId</c-></code><a class="self-link" href="#dom-hiddevice-sendfeaturereport-reportid-data-reportid"></a></dfn>, <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#BufferSource" id="ref-for-BufferSource③"><c- n>BufferSource</c-></a> <dfn class="idl-code" data-dfn-for="HIDDevice/sendFeatureReport(reportId, data)" data-dfn-type="argument" data-export id="dom-hiddevice-sendfeaturereport-reportid-data-data"><code><c- g>data</c-></code><a class="self-link" href="#dom-hiddevice-sendfeaturereport-reportid-data-data"></a></dfn>);
    <c- b>Promise</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DataView" id="ref-for-idl-DataView②"><c- b>DataView</c-></a>> <dfn class="idl-code" data-dfn-for="HIDDevice" data-dfn-type="method" data-export data-lt="receiveFeatureReport(reportId)" id="dom-hiddevice-receivefeaturereport"><code><c- g>receiveFeatureReport</c-></code><a class="self-link" href="#dom-hiddevice-receivefeaturereport"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet⑦"><c- b>octet</c-></a> <dfn class="idl-code" data-dfn-for="HIDDevice/receiveFeatureReport(reportId)" data-dfn-type="argument" data-export id="dom-hiddevice-receivefeaturereport-reportid-reportid"><code><c- g>reportId</c-></code><a class="self-link" href="#dom-hiddevice-receivefeaturereport-reportid-reportid"></a></dfn>);
};

</pre>
   <h2 class="heading settled" data-level="6" id="integrations"><span class="secno">6. </span><span class="content">Integrations</span><a class="self-link" href="#integrations"></a></h2>
   <h3 class="heading settled" data-level="6.1" id="feature-policy"><span class="secno">6.1. </span><span class="content">Feature Policy</span><a class="self-link" href="#feature-policy"></a></h3>
   <p>This specification defines a feature that controls whether the <code class="idl"><a data-link-type="idl" href="#dom-navigator-hid" id="ref-for-dom-navigator-hid">hid</a></code> attribute is exposed on the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/system-state.html#navigator" id="ref-for-navigator①">Navigator</a></code> object.</p>
   <p>The feature name for this feature is <code>"hid"</code>.</p>
   <p>The <a data-link-type="dfn" href="https://wicg.github.io/feature-policy/#default-allowlist" id="ref-for-default-allowlist">default allowlist</a> for this feature is <code>["self"]</code>.</p>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-hidcollectioninfo-children">children</a><span>, in §4.2</span>
   <li><a href="#dom-hiddevice-close">close()</a><span>, in §5</span>
   <li><a href="#dom-hiddevice-collections">collections</a><span>, in §5</span>
   <li>
    data
    <ul>
     <li><a href="#dom-hidinputreportevent-data">attribute for HIDInputReportEvent</a><span>, in §4.1</span>
     <li><a href="#dom-hidinputreporteventinit-data">dict-member for HIDInputReportEventInit</a><span>, in §4.1</span>
    </ul>
   <li><a href="#dom-hidreportitem-designatormaximum">designatorMaximum</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-designatorminimum">designatorMinimum</a><span>, in §4.2</span>
   <li>
    device
    <ul>
     <li><a href="#dom-hidconnectionevent-device">attribute for HIDConnectionEvent</a><span>, in §4.1</span>
     <li><a href="#dom-hidinputreportevent-device">attribute for HIDInputReportEvent</a><span>, in §4.1</span>
     <li><a href="#dom-hidconnectioneventinit-device">dict-member for HIDConnectionEventInit</a><span>, in §4.1</span>
     <li><a href="#dom-hidinputreporteventinit-device">dict-member for HIDInputReportEventInit</a><span>, in §4.1</span>
    </ul>
   <li><a href="#enumerate-all-devices-attached-to-the-system">enumerate all devices attached to the system</a><span>, in §4</span>
   <li><a href="#dom-hidcollectioninfo-featurereports">featureReports</a><span>, in §4.2</span>
   <li><a href="#dom-hidfieldoptions-fieldindex">fieldIndex</a><span>, in §4.2</span>
   <li><a href="#dom-hiddevicerequestoptions-filters">filters</a><span>, in §4</span>
   <li><a href="#dom-hid-getdevices">getDevices()</a><span>, in §4</span>
   <li><a href="#dom-hidcollectioninfo-getfield">getField(reportData, options)</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-hasnull">hasNull</a><span>, in §4.2</span>
   <li><a href="#hid">HID</a><span>, in §4</span>
   <li><a href="#dom-navigator-hid">hid</a><span>, in §4</span>
   <li><a href="#hidcollectioninfo">HIDCollectionInfo</a><span>, in §4.2</span>
   <li><a href="#hidconnectionevent">HIDConnectionEvent</a><span>, in §4.1</span>
   <li><a href="#dictdef-hidconnectioneventinit">HIDConnectionEventInit</a><span>, in §4.1</span>
   <li><a href="#dom-hidconnectionevent-hidconnectionevent">HIDConnectionEvent(type, eventInitDict)</a><span>, in §4.1</span>
   <li><a href="#hiddevice">HIDDevice</a><span>, in §5</span>
   <li><a href="#dictdef-hiddevicefilter">HIDDeviceFilter</a><span>, in §4</span>
   <li><a href="#dictdef-hiddevicerequestoptions">HIDDeviceRequestOptions</a><span>, in §4</span>
   <li><a href="#dictdef-hidfieldoptions">HIDFieldOptions</a><span>, in §4.2</span>
   <li><a href="#hidinputreportevent">HIDInputReportEvent</a><span>, in §4.1</span>
   <li><a href="#dictdef-hidinputreporteventinit">HIDInputReportEventInit</a><span>, in §4.1</span>
   <li><a href="#dom-hidinputreportevent-hidinputreportevent">HIDInputReportEvent(type, eventInitDict)</a><span>, in §4.1</span>
   <li><a href="#hidreportinfo">HIDReportInfo</a><span>, in §4.2</span>
   <li><a href="#hidreportitem">HIDReportItem</a><span>, in §4.2</span>
   <li><a href="#dom-hidcollectioninfo-inputreports">inputReports</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-isabsolute">isAbsolute</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-isarray">isArray</a><span>, in §4.2</span>
   <li><a href="#dom-hidfieldoptions-isfeaturereport">isFeatureReport</a><span>, in §4.2</span>
   <li><a href="#is-not-a-valid-filter">is not a valid filter</a><span>, in §4</span>
   <li><a href="#dom-hidreportitem-isrange">isRange</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportinfo-items">items</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-logicalmaximum">logicalMaximum</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-logicalminimum">logicalMinimum</a><span>, in §4.2</span>
   <li><a href="#match-a-device-filter">match a device filter</a><span>, in §4</span>
   <li><a href="#matches-the-device-filter">matches the device filter</a><span>, in §4</span>
   <li><a href="#dom-hid-onconnect">onconnect</a><span>, in §4</span>
   <li><a href="#dom-hid-ondisconnect">ondisconnect</a><span>, in §4</span>
   <li><a href="#dom-hiddevice-oninputreport">oninputreport</a><span>, in §5</span>
   <li><a href="#dom-hiddevice-open">open()</a><span>, in §5</span>
   <li><a href="#dom-hiddevice-opened">opened</a><span>, in §5</span>
   <li><a href="#dom-hidcollectioninfo-outputreports">outputReports</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-physicalmaximum">physicalMaximum</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-physicalminimum">physicalMinimum</a><span>, in §4.2</span>
   <li>
    productId
    <ul>
     <li><a href="#dom-hiddevice-productid">attribute for HIDDevice</a><span>, in §5</span>
     <li><a href="#dom-hiddevicefilter-productid">dict-member for HIDDeviceFilter</a><span>, in §4</span>
    </ul>
   <li><a href="#dom-hiddevice-productname">productName</a><span>, in §5</span>
   <li><a href="#dom-hiddevice-receivefeaturereport">receiveFeatureReport(reportId)</a><span>, in §5</span>
   <li><a href="#dom-hidreportitem-reportcount">reportCount</a><span>, in §4.2</span>
   <li>
    reportId
    <ul>
     <li><a href="#dom-hidinputreportevent-reportid">attribute for HIDInputReportEvent</a><span>, in §4.1</span>
     <li><a href="#dom-hidreportinfo-reportid">attribute for HIDReportInfo</a><span>, in §4.2</span>
     <li><a href="#dom-hidfieldoptions-reportid">dict-member for HIDFieldOptions</a><span>, in §4.2</span>
     <li><a href="#dom-hidinputreporteventinit-reportid">dict-member for HIDInputReportEventInit</a><span>, in §4.1</span>
    </ul>
   <li><a href="#dom-hidcollectioninfo-reportids">reportIds</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-reportsize">reportSize</a><span>, in §4.2</span>
   <li><a href="#dom-hid-requestdevice">requestDevice(options)</a><span>, in §4</span>
   <li><a href="#dom-hiddevice-sendfeaturereport">sendFeatureReport(reportId, data)</a><span>, in §5</span>
   <li><a href="#dom-hiddevice-sendreport">sendReport(reportId, data)</a><span>, in §5</span>
   <li><a href="#dom-hidcollectioninfo-setfield">setField(reportData, options, value)</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-stringmaximum">stringMaximum</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-stringminimum">stringMinimum</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-unit">unit</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-unitexponent">unitExponent</a><span>, in §4.2</span>
   <li>
    usage
    <ul>
     <li><a href="#dom-hidcollectioninfo-usage">attribute for HIDCollectionInfo</a><span>, in §4.2</span>
     <li><a href="#dom-hiddevicefilter-usage">dict-member for HIDDeviceFilter</a><span>, in §4</span>
    </ul>
   <li><a href="#dom-hidreportitem-usagemaximum">usageMaximum</a><span>, in §4.2</span>
   <li><a href="#dom-hidreportitem-usageminimum">usageMinimum</a><span>, in §4.2</span>
   <li>
    usagePage
    <ul>
     <li><a href="#dom-hidcollectioninfo-usagepage">attribute for HIDCollectionInfo</a><span>, in §4.2</span>
     <li><a href="#dom-hiddevicefilter-usagepage">dict-member for HIDDeviceFilter</a><span>, in §4</span>
    </ul>
   <li><a href="#dom-hidreportitem-usages">usages</a><span>, in §4.2</span>
   <li>
    vendorId
    <ul>
     <li><a href="#dom-hiddevice-vendorid">attribute for HIDDevice</a><span>, in §5</span>
     <li><a href="#dom-hiddevicefilter-vendorid">dict-member for HIDDeviceFilter</a><span>, in §4</span>
    </ul>
  </ul>
  <aside class="dfn-panel" data-for="term-for-event">
   <a href="https://dom.spec.whatwg.org/#event">https://dom.spec.whatwg.org/#event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event">4.1. Events</a> <a href="#ref-for-event①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-eventinit">
   <a href="https://dom.spec.whatwg.org/#dictdef-eventinit">https://dom.spec.whatwg.org/#dictdef-eventinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-eventinit">4.1. Events</a> <a href="#ref-for-dictdef-eventinit①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventtarget">
   <a href="https://dom.spec.whatwg.org/#eventtarget">https://dom.spec.whatwg.org/#eventtarget</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventtarget">4. Device Enumeration</a>
    <li><a href="#ref-for-eventtarget①">5. Device Usage</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-default-allowlist">
   <a href="https://wicg.github.io/feature-policy/#default-allowlist">https://wicg.github.io/feature-policy/#default-allowlist</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-default-allowlist">6.1. Feature Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">4. Device Enumeration</a> <a href="#ref-for-eventhandler①">(2)</a>
    <li><a href="#ref-for-eventhandler②">5. Device Usage</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-navigator">
   <a href="https://html.spec.whatwg.org/multipage/system-state.html#navigator">https://html.spec.whatwg.org/multipage/system-state.html#navigator</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-navigator">4. Device Enumeration</a>
    <li><a href="#ref-for-navigator①">6.1. Feature Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-BufferSource">
   <a href="https://heycam.github.io/webidl/#BufferSource">https://heycam.github.io/webidl/#BufferSource</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-BufferSource">4.2. HID Collection and Report Information</a> <a href="#ref-for-BufferSource①">(2)</a>
    <li><a href="#ref-for-BufferSource②">5. Device Usage</a> <a href="#ref-for-BufferSource③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">4.1. Events</a> <a href="#ref-for-idl-DOMString①">(2)</a>
    <li><a href="#ref-for-idl-DOMString②">5. Device Usage</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DataView">
   <a href="https://heycam.github.io/webidl/#idl-DataView">https://heycam.github.io/webidl/#idl-DataView</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DataView">4.1. Events</a> <a href="#ref-for-idl-DataView①">(2)</a>
    <li><a href="#ref-for-idl-DataView②">5. Device Usage</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">4. Device Enumeration</a>
    <li><a href="#ref-for-SameObject①">4.1. Events</a> <a href="#ref-for-SameObject②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SecureContext">
   <a href="https://heycam.github.io/webidl/#SecureContext">https://heycam.github.io/webidl/#SecureContext</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SecureContext">4. Device Enumeration</a> <a href="#ref-for-SecureContext①">(2)</a>
    <li><a href="#ref-for-SecureContext②">4.1. Events</a> <a href="#ref-for-SecureContext③">(2)</a>
    <li><a href="#ref-for-SecureContext④">4.2. HID Collection and Report Information</a> <a href="#ref-for-SecureContext⑤">(2)</a> <a href="#ref-for-SecureContext⑥">(3)</a>
    <li><a href="#ref-for-SecureContext⑦">5. Device Usage</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">4.2. HID Collection and Report Information</a> <a href="#ref-for-idl-boolean①">(2)</a> <a href="#ref-for-idl-boolean②">(3)</a> <a href="#ref-for-idl-boolean③">(4)</a> <a href="#ref-for-idl-boolean④">(5)</a>
    <li><a href="#ref-for-idl-boolean⑤">5. Device Usage</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">4.2. HID Collection and Report Information</a> <a href="#ref-for-idl-double①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-long">
   <a href="https://heycam.github.io/webidl/#idl-long">https://heycam.github.io/webidl/#idl-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-long">4.2. HID Collection and Report Information</a> <a href="#ref-for-idl-long①">(2)</a> <a href="#ref-for-idl-long②">(3)</a> <a href="#ref-for-idl-long③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-octet">
   <a href="https://heycam.github.io/webidl/#idl-octet">https://heycam.github.io/webidl/#idl-octet</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-octet">4.1. Events</a> <a href="#ref-for-idl-octet①">(2)</a>
    <li><a href="#ref-for-idl-octet②">4.2. HID Collection and Report Information</a> <a href="#ref-for-idl-octet③">(2)</a> <a href="#ref-for-idl-octet④">(3)</a>
    <li><a href="#ref-for-idl-octet⑤">5. Device Usage</a> <a href="#ref-for-idl-octet⑥">(2)</a> <a href="#ref-for-idl-octet⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long">https://heycam.github.io/webidl/#idl-unsigned-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long">4. Device Enumeration</a>
    <li><a href="#ref-for-idl-unsigned-long①">4.2. HID Collection and Report Information</a> <a href="#ref-for-idl-unsigned-long②">(2)</a> <a href="#ref-for-idl-unsigned-long③">(3)</a> <a href="#ref-for-idl-unsigned-long④">(4)</a> <a href="#ref-for-idl-unsigned-long⑤">(5)</a> <a href="#ref-for-idl-unsigned-long⑥">(6)</a> <a href="#ref-for-idl-unsigned-long⑦">(7)</a> <a href="#ref-for-idl-unsigned-long⑧">(8)</a> <a href="#ref-for-idl-unsigned-long⑨">(9)</a> <a href="#ref-for-idl-unsigned-long①⓪">(10)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-short">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-short">https://heycam.github.io/webidl/#idl-unsigned-short</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-short">4. Device Enumeration</a> <a href="#ref-for-idl-unsigned-short①">(2)</a> <a href="#ref-for-idl-unsigned-short②">(3)</a>
    <li><a href="#ref-for-idl-unsigned-short③">4.2. HID Collection and Report Information</a> <a href="#ref-for-idl-unsigned-short④">(2)</a> <a href="#ref-for-idl-unsigned-short⑤">(3)</a> <a href="#ref-for-idl-unsigned-short⑥">(4)</a>
    <li><a href="#ref-for-idl-unsigned-short⑦">5. Device Usage</a> <a href="#ref-for-idl-unsigned-short⑧">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-event" style="color:initial">Event</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-eventinit" style="color:initial">EventInit</span>
     <li><span class="dfn-paneled" id="term-for-eventtarget" style="color:initial">EventTarget</span>
    </ul>
   <li>
    <a data-link-type="biblio">[feature-policy-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-default-allowlist" style="color:initial">default allowlist</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
     <li><span class="dfn-paneled" id="term-for-navigator" style="color:initial">Navigator</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-BufferSource" style="color:initial">BufferSource</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-idl-DataView" style="color:initial">DataView</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-SecureContext" style="color:initial">SecureContext</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
     <li><span class="dfn-paneled" id="term-for-idl-long" style="color:initial">long</span>
     <li><span class="dfn-paneled" id="term-for-idl-octet" style="color:initial">octet</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long" style="color:initial">unsigned long</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-short" style="color:initial">unsigned short</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-feature-policy-1">[FEATURE-POLICY-1]
   <dd>Ian Clelland. <a href="https://www.w3.org/TR/feature-policy-1/">Feature Policy</a>. 16 April 2019. WD. URL: <a href="https://www.w3.org/TR/feature-policy-1/">https://www.w3.org/TR/feature-policy-1/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>dictionary</c-> <a href="#dictdef-hiddevicefilter"><code><c- g>HIDDeviceFilter</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-type="unsigned long " href="#dom-hiddevicefilter-vendorid"><code><c- g>vendorId</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short⑨"><c- b>unsigned</c-> <c- b>short</c-></a> <a data-type="unsigned short " href="#dom-hiddevicefilter-productid"><code><c- g>productId</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short①①"><c- b>unsigned</c-> <c- b>short</c-></a> <a data-type="unsigned short " href="#dom-hiddevicefilter-usagepage"><code><c- g>usagePage</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short②①"><c- b>unsigned</c-> <c- b>short</c-></a> <a data-type="unsigned short " href="#dom-hiddevicefilter-usage"><code><c- g>usage</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-hiddevicerequestoptions"><code><c- g>HIDDeviceRequestOptions</c-></code></a> {
    <c- b>required</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-hiddevicefilter" id="ref-for-dictdef-hiddevicefilter②"><c- n>HIDDeviceFilter</c-></a>> <a data-type="sequence<HIDDeviceFilter> " href="#dom-hiddevicerequestoptions-filters"><code><c- g>filters</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑧"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <a href="#hid"><code><c- g>HID</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget②"><c- n>EventTarget</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-hid-onconnect"><code><c- g>onconnect</c-></code></a>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-hid-ondisconnect"><code><c- g>ondisconnect</c-></code></a>;
    <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice⑥"><c- n>HIDDevice</c-></a>>> <a href="#dom-hid-getdevices"><code><c- g>getDevices</c-></code></a>();
    <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice①①"><c- n>HIDDevice</c-></a>>> <a href="#dom-hid-requestdevice"><code><c- g>requestDevice</c-></code></a>(
        <a class="n" data-link-type="idl-name" href="#dictdef-hiddevicerequestoptions" id="ref-for-dictdef-hiddevicerequestoptions①"><c- n>HIDDeviceRequestOptions</c-></a> <a href="#dom-hid-requestdevice-options-options"><code><c- g>options</c-></code></a>);
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext①①"><c- g>SecureContext</c-></a>] <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/system-state.html#navigator" id="ref-for-navigator②"><c- g>Navigator</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject③"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#hid" id="ref-for-hid①"><c- n>HID</c-></a> <a data-readonly data-type="HID" href="#dom-navigator-hid"><code><c- g>hid</c-></code></a>;
};


<c- b>dictionary</c-> <a href="#dictdef-hidconnectioneventinit"><code><c- g>HIDConnectionEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit②"><c- n>EventInit</c-></a> {
    <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice②①"><c- n>HIDDevice</c-></a> <a data-type="HIDDevice " href="#dom-hidconnectioneventinit-device"><code><c- g>device</c-></code></a>;
};

[
    <a href="#dom-hidconnectionevent-hidconnectionevent"><code><c- g>Constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a> <a href="#dom-hidconnectionevent-hidconnectionevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <a class="n" data-link-type="idl-name" href="#dictdef-hidconnectioneventinit" id="ref-for-dictdef-hidconnectioneventinit①"><c- n>HIDConnectionEventInit</c-></a> <a href="#dom-hidconnectionevent-hidconnectionevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a>),
    <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext②①"><c- g>SecureContext</c-></a>
] <c- b>interface</c-> <a href="#hidconnectionevent"><code><c- g>HIDConnectionEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event②"><c- n>Event</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice③①"><c- n>HIDDevice</c-></a> <a data-readonly data-type="HIDDevice" href="#dom-hidconnectionevent-device"><code><c- g>device</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-hidinputreporteventinit"><code><c- g>HIDInputReportEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit①①"><c- n>EventInit</c-></a> {
    <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice④①"><c- n>HIDDevice</c-></a> <a data-type="HIDDevice " href="#dom-hidinputreporteventinit-device"><code><c- g>device</c-></code></a>;
    <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet⑧"><c- b>octet</c-></a> <a data-type="octet " href="#dom-hidinputreporteventinit-reportid"><code><c- g>reportId</c-></code></a>;
    <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DataView" id="ref-for-idl-DataView③"><c- b>DataView</c-></a> <a data-type="DataView " href="#dom-hidinputreporteventinit-data"><code><c- g>data</c-></code></a>;
};

[
    <a href="#dom-hidinputreportevent-hidinputreportevent"><code><c- g>Constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a href="#dom-hidinputreportevent-hidinputreportevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <a class="n" data-link-type="idl-name" href="#dictdef-hidinputreporteventinit" id="ref-for-dictdef-hidinputreporteventinit①"><c- n>HIDInputReportEventInit</c-></a> <a href="#dom-hidinputreportevent-hidinputreportevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a>),
    <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext③①"><c- g>SecureContext</c-></a>
] <c- b>interface</c-> <a href="#hidinputreportevent"><code><c- g>HIDInputReportEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①①"><c- n>Event</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject②①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#hiddevice" id="ref-for-hiddevice⑤①"><c- n>HIDDevice</c-></a> <a data-readonly data-type="HIDDevice" href="#dom-hidinputreportevent-device"><code><c- g>device</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet①①"><c- b>octet</c-></a> <a data-readonly data-type="octet" href="#dom-hidinputreportevent-reportid"><code><c- g>reportId</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DataView" id="ref-for-idl-DataView①①"><c- b>DataView</c-></a> <a data-readonly data-type="DataView" href="#dom-hidinputreportevent-data"><code><c- g>data</c-></code></a>;
};


[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext④①"><c- g>SecureContext</c-></a>] <c- b>interface</c-> <a href="#hidreportitem"><code><c- g>HIDReportItem</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑥"><c- b>boolean</c-></a> <a data-readonly data-type="boolean" href="#dom-hidreportitem-isabsolute"><code><c- g>isAbsolute</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①①"><c- b>boolean</c-></a> <a data-readonly data-type="boolean" href="#dom-hidreportitem-isarray"><code><c- g>isArray</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②①"><c- b>boolean</c-></a> <a data-readonly data-type="boolean" href="#dom-hidreportitem-isrange"><code><c- g>isRange</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③①"><c- b>boolean</c-></a> <a data-readonly data-type="boolean" href="#dom-hidreportitem-hasnull"><code><c- g>hasNull</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①②"><c- b>unsigned</c-> <c- b>long</c-></a>> <a data-readonly data-type="FrozenArray<unsigned long>" href="#dom-hidreportitem-usages"><code><c- g>usages</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long②①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-hidreportitem-usageminimum"><code><c- g>usageMinimum</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long③①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-hidreportitem-usagemaximum"><code><c- g>usageMaximum</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long④①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-hidreportitem-designatorminimum"><code><c- g>designatorMinimum</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑤①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-hidreportitem-designatormaximum"><code><c- g>designatorMaximum</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑥①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-hidreportitem-stringminimum"><code><c- g>stringMinimum</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑦①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-hidreportitem-stringmaximum"><code><c- g>stringMaximum</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short③①"><c- b>unsigned</c-> <c- b>short</c-></a> <a data-readonly data-type="unsigned short" href="#dom-hidreportitem-reportsize"><code><c- g>reportSize</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short④①"><c- b>unsigned</c-> <c- b>short</c-></a> <a data-readonly data-type="unsigned short" href="#dom-hidreportitem-reportcount"><code><c- g>reportCount</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑧①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-hidreportitem-unitexponent"><code><c- g>unitExponent</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long⑨①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-hidreportitem-unit"><code><c- g>unit</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long④"><c- b>long</c-></a> <a data-readonly data-type="long" href="#dom-hidreportitem-logicalminimum"><code><c- g>logicalMinimum</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long①①"><c- b>long</c-></a> <a data-readonly data-type="long" href="#dom-hidreportitem-logicalmaximum"><code><c- g>logicalMaximum</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long②①"><c- b>long</c-></a> <a data-readonly data-type="long" href="#dom-hidreportitem-physicalminimum"><code><c- g>physicalMinimum</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long③①"><c- b>long</c-></a> <a data-readonly data-type="long" href="#dom-hidreportitem-physicalmaximum"><code><c- g>physicalMaximum</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑤①"><c- g>SecureContext</c-></a>] <c- b>interface</c-> <a href="#hidreportinfo"><code><c- g>HIDReportInfo</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet②①"><c- b>octet</c-></a> <a data-readonly data-type="octet" href="#dom-hidreportinfo-reportid"><code><c- g>reportId</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidreportitem" id="ref-for-hidreportitem①"><c- n>HIDReportItem</c-></a>> <a data-readonly data-type="FrozenArray<HIDReportItem>" href="#dom-hidreportinfo-items"><code><c- g>items</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-hidfieldoptions"><code><c- g>HIDFieldOptions</c-></code></a> {
    <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet③①"><c- b>octet</c-></a> <a data-type="octet " href="#dom-hidfieldoptions-reportid"><code><c- g>reportId</c-></code></a>;
    <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①⓪①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-type="unsigned long " href="#dom-hidfieldoptions-fieldindex"><code><c- g>fieldIndex</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean④①"><c- b>boolean</c-></a> <a data-type="boolean " href="#dom-hidfieldoptions-isfeaturereport"><code><c- g>isFeatureReport</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑥①"><c- g>SecureContext</c-></a>] <c- b>interface</c-> <a href="#hidcollectioninfo"><code><c- g>HIDCollectionInfo</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short⑤①"><c- b>unsigned</c-> <c- b>short</c-></a> <a data-readonly data-type="unsigned short" href="#dom-hidcollectioninfo-usagepage"><code><c- g>usagePage</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short⑥①"><c- b>unsigned</c-> <c- b>short</c-></a> <a data-readonly data-type="unsigned short" href="#dom-hidcollectioninfo-usage"><code><c- g>usage</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidcollectioninfo" id="ref-for-hidcollectioninfo②①"><c- n>HIDCollectionInfo</c-></a>> <a data-readonly data-type="FrozenArray<HIDCollectionInfo>" href="#dom-hidcollectioninfo-children"><code><c- g>children</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidreportinfo" id="ref-for-hidreportinfo③"><c- n>HIDReportInfo</c-></a>> <a data-readonly data-type="FrozenArray<HIDReportInfo>" href="#dom-hidcollectioninfo-inputreports"><code><c- g>inputReports</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidreportinfo" id="ref-for-hidreportinfo①①"><c- n>HIDReportInfo</c-></a>> <a data-readonly data-type="FrozenArray<HIDReportInfo>" href="#dom-hidcollectioninfo-outputreports"><code><c- g>outputReports</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidreportinfo" id="ref-for-hidreportinfo②①"><c- n>HIDReportInfo</c-></a>> <a data-readonly data-type="FrozenArray<HIDReportInfo>" href="#dom-hidcollectioninfo-featurereports"><code><c- g>featureReports</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet④①"><c- b>octet</c-></a>> <a data-readonly data-type="FrozenArray<octet>" href="#dom-hidcollectioninfo-reportids"><code><c- g>reportIds</c-></code></a>;

    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <a href="#dom-hidcollectioninfo-getfield"><code><c- g>getField</c-></code></a>(<a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#BufferSource" id="ref-for-BufferSource④"><c- n>BufferSource</c-></a> <a href="#dom-hidcollectioninfo-getfield-reportdata-options-reportdata"><code><c- g>reportData</c-></code></a>, <a class="n" data-link-type="idl-name" href="#dictdef-hidfieldoptions" id="ref-for-dictdef-hidfieldoptions②"><c- n>HIDFieldOptions</c-></a> <a href="#dom-hidcollectioninfo-getfield-reportdata-options-options"><code><c- g>options</c-></code></a>);
    <c- b>void</c-> <a href="#dom-hidcollectioninfo-setfield"><code><c- g>setField</c-></code></a>(<a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#BufferSource" id="ref-for-BufferSource①①"><c- n>BufferSource</c-></a> <a href="#dom-hidcollectioninfo-setfield-reportdata-options-value-reportdata"><code><c- g>reportData</c-></code></a>, <a class="n" data-link-type="idl-name" href="#dictdef-hidfieldoptions" id="ref-for-dictdef-hidfieldoptions①①"><c- n>HIDFieldOptions</c-></a> <a href="#dom-hidcollectioninfo-setfield-reportdata-options-value-options"><code><c- g>options</c-></code></a>,
                  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a> <a href="#dom-hidcollectioninfo-setfield-reportdata-options-value-value"><code><c- g>value</c-></code></a>);
};


[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext⑦①"><c- g>SecureContext</c-></a>] <c- b>interface</c-> <a href="#hiddevice"><code><c- g>HIDDevice</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget①①"><c- n>EventTarget</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-hiddevice-oninputreport"><code><c- g>oninputreport</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑤①"><c- b>boolean</c-></a> <a data-readonly data-type="boolean" href="#dom-hiddevice-opened"><code><c- g>opened</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short⑦①"><c- b>unsigned</c-> <c- b>short</c-></a> <a data-readonly data-type="unsigned short" href="#dom-hiddevice-vendorid"><code><c- g>vendorId</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short⑧①"><c- b>unsigned</c-> <c- b>short</c-></a> <a data-readonly data-type="unsigned short" href="#dom-hiddevice-productid"><code><c- g>productId</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-hiddevice-productname"><code><c- g>productName</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#hidcollectioninfo" id="ref-for-hidcollectioninfo③①"><c- n>HIDCollectionInfo</c-></a>> <a data-readonly data-type="FrozenArray<HIDCollectionInfo>" href="#dom-hiddevice-collections"><code><c- g>collections</c-></code></a>;
    <c- b>Promise</c->&lt;<c- b>void</c->> <a href="#dom-hiddevice-open"><code><c- g>open</c-></code></a>();
    <c- b>Promise</c->&lt;<c- b>void</c->> <a href="#dom-hiddevice-close"><code><c- g>close</c-></code></a>();
    <c- b>Promise</c->&lt;<c- b>void</c->> <a href="#dom-hiddevice-sendreport"><code><c- g>sendReport</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet⑤①"><c- b>octet</c-></a> <a href="#dom-hiddevice-sendreport-reportid-data-reportid"><code><c- g>reportId</c-></code></a>, <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#BufferSource" id="ref-for-BufferSource②①"><c- n>BufferSource</c-></a> <a href="#dom-hiddevice-sendreport-reportid-data-data"><code><c- g>data</c-></code></a>);
    <c- b>Promise</c->&lt;<c- b>void</c->> <a href="#dom-hiddevice-sendfeaturereport"><code><c- g>sendFeatureReport</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet⑥①"><c- b>octet</c-></a> <a href="#dom-hiddevice-sendfeaturereport-reportid-data-reportid"><code><c- g>reportId</c-></code></a>, <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#BufferSource" id="ref-for-BufferSource③①"><c- n>BufferSource</c-></a> <a href="#dom-hiddevice-sendfeaturereport-reportid-data-data"><code><c- g>data</c-></code></a>);
    <c- b>Promise</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DataView" id="ref-for-idl-DataView②①"><c- b>DataView</c-></a>> <a href="#dom-hiddevice-receivefeaturereport"><code><c- g>receiveFeatureReport</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-octet" id="ref-for-idl-octet⑦①"><c- b>octet</c-></a> <a href="#dom-hiddevice-receivefeaturereport-reportid-reportid"><code><c- g>reportId</c-></code></a>);
};


</pre>
  <aside class="dfn-panel" data-for="dictdef-hiddevicefilter">
   <b><a href="#dictdef-hiddevicefilter">#dictdef-hiddevicefilter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-hiddevicefilter">4. Device Enumeration</a> <a href="#ref-for-dictdef-hiddevicefilter①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hiddevicefilter-vendorid">
   <b><a href="#dom-hiddevicefilter-vendorid">#dom-hiddevicefilter-vendorid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hiddevicefilter-vendorid">4. Device Enumeration</a> <a href="#ref-for-dom-hiddevicefilter-vendorid①">(2)</a> <a href="#ref-for-dom-hiddevicefilter-vendorid②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hiddevicefilter-productid">
   <b><a href="#dom-hiddevicefilter-productid">#dom-hiddevicefilter-productid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hiddevicefilter-productid">4. Device Enumeration</a> <a href="#ref-for-dom-hiddevicefilter-productid①">(2)</a> <a href="#ref-for-dom-hiddevicefilter-productid②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hiddevicefilter-usagepage">
   <b><a href="#dom-hiddevicefilter-usagepage">#dom-hiddevicefilter-usagepage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hiddevicefilter-usagepage">4. Device Enumeration</a> <a href="#ref-for-dom-hiddevicefilter-usagepage①">(2)</a> <a href="#ref-for-dom-hiddevicefilter-usagepage②">(3)</a> <a href="#ref-for-dom-hiddevicefilter-usagepage③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hiddevicefilter-usage">
   <b><a href="#dom-hiddevicefilter-usage">#dom-hiddevicefilter-usage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hiddevicefilter-usage">4. Device Enumeration</a> <a href="#ref-for-dom-hiddevicefilter-usage①">(2)</a> <a href="#ref-for-dom-hiddevicefilter-usage②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-hiddevicerequestoptions">
   <b><a href="#dictdef-hiddevicerequestoptions">#dictdef-hiddevicerequestoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-hiddevicerequestoptions">4. Device Enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="hid">
   <b><a href="#hid">#hid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-hid">4. Device Enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hid-getdevices">
   <b><a href="#dom-hid-getdevices">#dom-hid-getdevices</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hid-getdevices">4. Device Enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hid-requestdevice">
   <b><a href="#dom-hid-requestdevice">#dom-hid-requestdevice</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hid-requestdevice">4. Device Enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-navigator-hid">
   <b><a href="#dom-navigator-hid">#dom-navigator-hid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-navigator-hid">6.1. Feature Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matches-the-device-filter">
   <b><a href="#matches-the-device-filter">#matches-the-device-filter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matches-the-device-filter">4. Device Enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-hidconnectioneventinit">
   <b><a href="#dictdef-hidconnectioneventinit">#dictdef-hidconnectioneventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-hidconnectioneventinit">4.1. Events</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-hidinputreporteventinit">
   <b><a href="#dictdef-hidinputreporteventinit">#dictdef-hidinputreporteventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-hidinputreporteventinit">4.1. Events</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="hidreportitem">
   <b><a href="#hidreportitem">#hidreportitem</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-hidreportitem">4.2. HID Collection and Report Information</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="hidreportinfo">
   <b><a href="#hidreportinfo">#hidreportinfo</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-hidreportinfo">4.2. HID Collection and Report Information</a> <a href="#ref-for-hidreportinfo①">(2)</a> <a href="#ref-for-hidreportinfo②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-hidfieldoptions">
   <b><a href="#dictdef-hidfieldoptions">#dictdef-hidfieldoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-hidfieldoptions">4.2. HID Collection and Report Information</a> <a href="#ref-for-dictdef-hidfieldoptions①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="hidcollectioninfo">
   <b><a href="#hidcollectioninfo">#hidcollectioninfo</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-hidcollectioninfo">4. Device Enumeration</a> <a href="#ref-for-hidcollectioninfo①">(2)</a>
    <li><a href="#ref-for-hidcollectioninfo②">4.2. HID Collection and Report Information</a>
    <li><a href="#ref-for-hidcollectioninfo③">5. Device Usage</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hidcollectioninfo-usagepage">
   <b><a href="#dom-hidcollectioninfo-usagepage">#dom-hidcollectioninfo-usagepage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hidcollectioninfo-usagepage">4. Device Enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hidcollectioninfo-usage">
   <b><a href="#dom-hidcollectioninfo-usage">#dom-hidcollectioninfo-usage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hidcollectioninfo-usage">4. Device Enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="hiddevice">
   <b><a href="#hiddevice">#hiddevice</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-hiddevice">4. Device Enumeration</a> <a href="#ref-for-hiddevice①">(2)</a>
    <li><a href="#ref-for-hiddevice②">4.1. Events</a> <a href="#ref-for-hiddevice③">(2)</a> <a href="#ref-for-hiddevice④">(3)</a> <a href="#ref-for-hiddevice⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hiddevice-vendorid">
   <b><a href="#dom-hiddevice-vendorid">#dom-hiddevice-vendorid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hiddevice-vendorid">4. Device Enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hiddevice-productid">
   <b><a href="#dom-hiddevice-productid">#dom-hiddevice-productid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hiddevice-productid">4. Device Enumeration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-hiddevice-collections">
   <b><a href="#dom-hiddevice-collections">#dom-hiddevice-collections</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-hiddevice-collections">4. Device Enumeration</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>